<template>
  <div class="tableList" :style="styleObj">
    <ul
      v-for="(item, index) in list"
      :key="index"
    >
      <div class="icon"><img :src="imgStyle.imageIcon + token" /></div>
      <div class="content">
        <div class="top" :style="topStlye">{{item.title}}</div>
        <div class="bottom">
          <div class="svg"><img :src="imgStyle1.imageSvg + token" /></div>
          <div class="local" :style="smallStyle">{{item.local}}</div>
          <div class="clickText" @click="hanldClick" v-if="optionsSetUp.isShow" :style="clickStyle">{{optionsSetUp.clickText}}</div>
          <div class="time"><span :style="issuerStyle">{{item.pople}}</span>&nbsp;&nbsp;<span :style="timeStyle">发布于：{{item.time}}</span></div>
        </div>
      </div>
    </ul>
  </div>
</template>

<script>
import { queryEchartsData } from "@/api/bigscreen";
import { getToken } from '@/utils/auth';
export default {
  name: "WidgetList",
  components: {},
  props: {
    value: Object,
    ispreview: Boolean
  },
  data() {
    return {
      options: {},
      list:[],
      optionsSetUp: {},
      optionsPosition: {},
      optionsData: {},
      token: `&Authorization=${getToken()}`
    };
  },
  computed: {
    imgStyle() {
      return {
        imageIcon: this.optionsSetUp.imageIcon,
      };
    },
    imgStyle1() {
      return {
        imageSvg: this.optionsSetUp.imageSvg,
      };
    },
    styleObj() {
      const allStyle = this.optionsPosition;
      return {
        position: this.ispreview ? "absolute" : "static",
        width: allStyle.width + "px",
        height: allStyle.height + "px",
        left: allStyle.left + "px",
        top: allStyle.top + "px",
      };
    },
    topStlye() {
      return {
        "font-size": this.optionsSetUp.titleSize + "px",
        color: this.optionsSetUp.titleColor,
        "font-weight": this.optionsSetUp.fontWeight,
        "letter-spacing": this.optionsSetUp.letterSpacing + "em",
      };
    },
    smallStyle() {
      return {
        "font-size": this.optionsSetUp.smallSize + "px",
        color: this.optionsSetUp.smallColor,
        "font-weight": this.optionsSetUp.smallFontWeight,
        "letter-spacing": this.optionsSetUp.smallLetterSpacing + "em",
      };
    },
    clickStyle() {
      return {
        "font-size": this.optionsSetUp.clickSize + "px",
        color: this.optionsSetUp.clickColor,
        "font-weight": this.optionsSetUp.clickFontWeight,
        "letter-spacing": this.optionsSetUp.clickLetterSpacing + "em",
        "cursor": "pointer"
      };
    },
    issuerStyle() {
      return {
        "font-size": this.optionsSetUp.issuerSize + "px",
        color: this.optionsSetUp.issuerColor,
        "font-weight": this.optionsSetUp.issuerFontWeight,
        "letter-spacing": this.optionsSetUp.issuerLetterSpacing + "em",
      };
    },
    timeStyle() {
      return {
        "font-size": this.optionsSetUp.timeSize + "px",
        color: this.optionsSetUp.timeColor,
        "font-weight": this.optionsSetUp.timeFontWeight,
        "letter-spacing": this.optionsSetUp.timeLetterSpacing + "em",
      };
    },
  },
  watch: {
    value: {
      handler(val) {
        this.optionsSetUp = val.setup;
        this.optionsPosition = val.position;
        this.optionsData = val.data;
        this.initData();
      },
      deep: true,
    }
  },
  mounted() {
    this.optionsSetUp = this.value.setup;
    this.optionsPosition = this.value.position;
    this.optionsData = this.value.data;
    this.initData();
  },
  methods: {
    initData() {
      this.handlerData();
    },
    handlerData() {
      const tableData = this.optionsData;
      tableData.dataType == "staticData"
        ? this.handlerStaticData(tableData.staticData)
        : this.handlerDymaicData(tableData.dynamicData, tableData.refreshTime);
    },
    handlerStaticData(val) {
      if(typeof val === 'string') {
        val = JSON.parse(val)
      }
      this.list = val;
    },
    handlerDymaicData(val, refreshTime) {
     // 如果没有请求参数不调接口
      let isQuery = val && val.url && val.dataMethod
      if (!isQuery) return;
      if (this.ispreview) {
        this.getEchartData(val);
        if(refreshTime === 0) return
        this.flagInter = setInterval(() => {
          this.getEchartData(val);
        }, refreshTime);
      } else {
        this.getEchartData(val);
      }
    },
    getEchartData(val) {
      queryEchartsData(val)
        .then(res => {
          this.list = res.data;
          // this.hackResetFun();
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 点击事件
    hanldClick() {
      if(this.optionsSetUp.canClick && this.optionsSetUp.routerUrl) {
        const routerUrl = this.optionsSetUp.routerUrl
        const jumpMode = this.optionsSetUp.jumpMode
        if(routerUrl.startsWith('http://') || routerUrl.startsWith('https://')) {
          if(jumpMode === 'self'){
            window.location.href = routerUrl
          } else {
            window.open(routerUrl)
          }
        } else {
          if(jumpMode === 'self'){
            this.$router.push(routerUrl)
          } else {
            var routeUrl = this.$router.resolve({
              path: routerUrl,
            });
            window.open(routeUrl.href, "_blank");
          }

        }
      }
    }
  }
};
</script>

<style scoped lang="less">
.tableList {
  ul {
    display: flex;
    margin: 20px;
    .icon {
      width: 40px;
      margin-right: 20px;
      img {
        width: 40px;
        height: 40px;
        border-radius: 100%;
        margin-top: 4px;
        object-fit: contain;
      }

    }
    .content {

      flex: 1;
      overflow: hidden;
      .top {
        text-align: left;
        margin-bottom: 10px;
      }
      .bottom {
        .svg {
          float: left;
          img {
            width: 20px;
            height: 16px;
            object-fit: contain;
          }

          margin-right: 10px;
        }
        .local {
          float: left;
          margin-right: 6px;
        }
        .clickText {
          float: left;
        }
        .time {
          float: right;
        }
      }
    }
  }
}
</style>
